<!-- 联系记录详情页面 -->
<template>
	<view class="record">			
		<div>
			<navitop>
				<i class="iconfont" slot="left-slot" @click="outlot">&#xe667;</i>
				<span slot="center-slot">新增跟进记录</span>
				<!-- <i class="iconfont icon-jiahao" slot="right-slot" style="color: red;font-size: 22px;" @click="tapPopup"></i> -->
			</navitop>
		</div>
		<div class="record_one public_mag_top" >
			<view class="record_det">
				<div class="record_span">
					<span>客户名称：</span>
				</div> 
				<div class="record_input"><text>{{kh_name}}</text></div>
			</view>  
			
			<br>
			<view class="record_class">
				<div :class="recordField" @click='recordFieldClick(1)'>外勤拜访</div>
				<div :class="recordField_one" @click='recordFieldClick(2)'>会话沟通</div>
			</view>
		 
			<br>
			
			<view v-for="(item,index) in field_list"> 
			
				<view class="textarea_op" v-if="item.type == '快速文本'">
					<textarea class="textarea_text" cursor-spacing="-20" v-model="item.value" placeholder="填写电话、微信、qq、邮件以及现场拜访等与客户交流沟通内容,现场拜访需提交定位和拍照。"></textarea>
				</view> 
				<view class="record_det" v-if="item.type == '时间' && item.code == 'contactDate'">
					<div class="public_list_left_one">
						<div class="record_span"><span>{{item.name}}:</span></div>
					</div>
					<div class="public_list_right" @click="Time_val(item)">
						<kxTime :date='cDate' :default_time='1' :start='1' @rundata='kxdatetime' ></kxTime>
					</div>
				</view>  
				<view class="record_det" v-if="item.type == '查询下拉'">
					<div class="public_list_left_one">
						<div class="record_span"><span>{{item.name}}:</span></div>
					</div>
					<div class="public_list_right">
						<input v-model="item.value" disabled='true' @click="alert_uName(item)"/>
					</div>
				</view>  
				<view class="record_det" v-if="item.type == '下拉'">
					<div class="public_list_left_one">
						<div class="record_span"><span>{{item.name}}:</span></div> 
					</div>
					<div class="public_list_right">
						<input v-model="item.value" disabled='true' @click="public_alert(item)"/>
					</div>
				</view> 
				<view v-show="record_show" class="record_sign_text" v-if="item.type == '文本' && item.code == 'visitSign'"> 
					<div class="record_sign">
						<div>
						</div>
						<div >
							<div>
								<text>我的位置：</text>
							</div>
							<div style="padding: 10px 0 10px 0;">
								<i class="iconfont icon-weizhi" style="color: #007aff;padding-right: 20rpx;font-size: 20px;"></i><text>{{visitSign}}</text>	
							</div>
						</div>
					</div>
					<div class="record_sign">
						<div>
							<text></text>
						</div>
						<div class="record_sign_text">
							<div>
								<text>目标位置：</text>
							</div>
							<div style="padding: 10px 0 10px 0;">
								<i class="iconfont icon-mubiao" style="font-size: 20px; color: rgb(113, 110, 110); padding-right: 20rpx;"></i><text>{{citys}}</text>	
							</div> 
						</div>
					</div>
					<div class="record_city">
						<text style="float: right;padding: 0 20rpx 0 0;" @click="citycli">定位不准?重新定位</text>
					</div>
					<div>
						<imgUploaddify @delarray="delarra" :citys="visitSign" :customer="kh_name" :headers="token" @uplodefile="upldfile" :action="action"></imgUploaddify>
					</div>
				</view>
				
				
				<view class="record_det" v-if="item.type == '搜索选择' && item.code == 'salesManId'">
					<div class="public_list_left_one">
						<div class="record_span"><span>{{item.name}}:</span></div> 
					</div>
					<div class="public_list_right">
						<input v-model="user_mass.name" disabled='true' />
					</div>
				</view> 
				
			 </view>
			 <view class="record_class_bottom" v-show="record_txt">
			 	<i class="iconfont icon-qiandao"  @click="city_click"></i>
			 </view>
			</div>
		<br>
		<div :style="heigsdiv"></div>
		<div class="public_button" :style="heigs" v-show="!record_txt">
			<div class="public_text" @click="okclick">
				保&nbsp;&nbsp;存
			</div>
		</div>
		<!-- 弹窗组件 -->
		<popus ref="alert">
			<alertcenter @row="row" @closes="closes" :dataSorc="data" ></alertcenter>
		</popus>
	</view>
</template>

<script>
	import navitop from '@/components/common/navi-top'
	import imgUploaddify from "@/components/image-upload/wate-upload"
	import kxTime from "@/components/kx-datetime/kx-datetime"
	import alertcenter from '@/pages/common/common/alert/alertcenter'
	import popus from '@/uni_modules/uni-popup/components/uni-popup/uni-popup'
	import {detaildls,touchsave,dataList,userdetail,list,pages,namelist,getUserInfo} from '@/common/api/job/jobapi.js'
	
	export default {
		components: { 
			navitop,
			imgUploaddify,
			kxTime,
			popus,
			alertcenter
		},
		data(){
			return {
				ceshiData: [], // 图片显示
				token: [],
				data:[{name:1}],
				img_group: false,
				date: '', //需要展示的时间数据
				dates: '',
				dataSorce: '',
				gj_time:'',		//跟进时间
				uid:'',
				url: '',
				cDate: null,
				action: '',
				staff:[],     //员工列表
				kh_name: ''	,  // 客户名称
				lx_name: [],	// 联系人
				dept: '',	//员工部门
				crmGrades:[], //客户等级
				touchTypes: [], //客户联系方式
				crmTouchs: [], 	//联系类别
				crmType: '',	//外部分类
				
				crmGrade:'',	//客户等级
				contactDate: '',	//联系时间
				crmName: '',	//客户名称
				crmId : '',		//客户ID
				linkManId:'',	//联系人ID
				salesManId: '',	//业务员Id
				linkManName: '', //联系人姓名
				remarks: '',    //描述
				salesManName: '', //业务员姓名
				photograph: '',	//拍照
				signDate: '',	//签到时间
				visitSign: '',  //拜访签到
				crmTouch: ''	,//联系类别
				nextTouchDate: '',	//下次联系时间
				nextTouchTarget: '', //下次联系目标
				touchMode: '',		//联系电话
				touchPhone: '',		//联系手机号
				touchType: '',		//联系方式
				crmTouch: '',		// 联系类别/阶段
				heigs: '',
				heigsdiv: 0,
				
				record_show: false,	// 定位模块显示
				record_txt: true,	// 定位文字显示
				recordField: '',	// 签到
				recordField_one: '',	// 会话
				
				dayTime: '',	// 获取签到时间
				
				class_id: '',	// 分类
				
				stal: '',	// 跳转分类
				
				citys: '',	// 客户地址
				
				collName: '',	// 获取业务员
				
				field_list: '', 	// 跟进记录字段列表
				
				user_mass:'',	//获取业务员信息
			}
		},
		onLoad(option) {
			console.log(option)
			uni.onKeyboardHeightChange(res => {
				res.height = res.height + 50;
				this.heigsdiv = 'height:' + res.height  + 'px;' ;
				this.heigs = 'height:' + res.height + 'px;' ;
			})
			this.uid = option.id;
			this.kh_name = option.names;
			this.crmType = option.crmType;
			this.stal = option.stal;
			if(option.street !== 'null' && option.street){
				this.citys = option.street;
			}
			this.url = '&classid=' + option.classid + '&crmType=' + option.crmType + '&name=' + option.name;
			
			// 员工列表
			this.collName = uni.getStorageSync('userInfo');
			
			dataList({isLoadUser: 2}).then((result) => {
				for(let i in result.data){
					if(result.data[i].id.split("_")[1]){
						this.staff.push(result.data[i]);
					}
				}
				for(let i in this.staff){
					this.staff[i]['code'] = 'lx_user';
				}
			});
			
			// 联系人 
			list({source: 'linkMan'}).then((row) => {
				if(row.code == 200){
					pages({'dtos':row.data,'crmType': this.crmType,'customerIds':this.uid,'isCollected':false,'type':'linkMan'}).then((val) => {	
							if(val.code == 200){
								this.lx_name = val.data.records;
								this.lx_name.filter(function(item){
									item['code'] = 'linkManId';
								})
							}
					}) 
					
				}
			})
			
			// 联系记录字段
			list({source: 'touch'}).then((row) => {
				if(row.code == 200){
					console.log(row)
					this.field_list = row.data;
				}
			})
			
			// 获取登录用户
			getUserInfo().then(item => {
				if(item.code == 200){
					this.user_mass = item.data;
				}
			})
			
			
			// 获取用户下啦列表
			this.user_suad();
			let userInfo = uni.getStorageSync('userInfo');
			this.salesManName = userInfo.realName;
			this.salesManId = userInfo.userId;
			// console.log(userInfo)
			
		},
		mounted() {
			this.token = {'Access-Token':uni.getStorageSync('token')}
			// 文件上传路径
			this.action = uni.getStorageSync('serverUrl') + '/uploadFile';
			
			if(this.stal){
				this.recordField = 'record_field';
				this.recordField_one = '';
				this.record_txt = true;
				this.class_id = 2;	// 外请签到
			}else{
				this.recordField = '';
				this.recordField_one = 'record_field';
				this.record_txt = false;
				this.class_id = 1;	// 默认会话沟通
			}
			
			
			var date =new Date();
			var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
			var month = date.getMonth() + 1;      //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
			var day = date.getDate();             //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
			var hours = date.getHours();          //小时 ,返回 Date 对象的小时 (0 ~ 23)
			var minutes = date.getMinutes();      //分钟 ,返回 Date 对象的分钟 (0 ~ 59)
			var seconds = date.getSeconds();      //秒 ,返回 Date 对象的秒数 (0 ~ 59)   
			
			//获取当前系统时间  
			if(month < 10){
				month = 0 + String(month);
			}
			if(day < 10){
				day = 0 + String(day);
			}
			if(hours < 10){
				hours = 0 + String(hours);
			}
			if(minutes < 10){
				minutes = 0 + String(minutes);
			}
			// console.log(hours)
					
			var currentDate = year + "-" + month + "-" + day ;
			this.cDate = currentDate;
			
			
		},
		methods: {
			// 点击切换
			recordFieldClick(val){
				if(val == 1){
					this.record_txt = true;
					this.recordField = 'record_field';
					this.recordField_one = '';
					this.class_id = 2;
				}
				if(val == 2){
					this.record_txt = false;
					this.record_show = false;
					this.recordField = '';
					this.recordField_one = 'record_field';
					
					this.visitSign = '';
					this.class_id = 1;
				}
			},
			
			// 点击签到
			city_click(){
				this.record_show = true;
				this.record_txt = false;
				// 定位
				this.cityclick();
				
			},
			
			alert_uName(val){
				this.data = this.lx_name;
					this.$refs.alert.open('bottom');
			},
			
			public_alert(val){
				this.data = [];
				this.crmGrades.filter((item) => {
					if(val.code == item.code){
						item.value.filter((cntval) => {
							if(cntval.code == val.code){
								this.data.push(cntval)
							}
						})
					}
				})
				this.$refs.alert.open('bottom');
			},
			
			// 获取弹窗
			row(val){
				if(val.code == 'linkManId'){
						this.dept = val.dept;
						this.linkManName = val.name;
						this.touchPhone = val.mobile;
						this.touchMode = val.officePhone;
						this.linkManId = val.id;
				}
				this.field_list.filter((item) => {
					if(item.code == val.code){
						this.$set(item,'value',val.name)
					}
				})
				
				this.$refs.alert.close();
			},
			
			closes(){
				this.$refs.alert.close();
			},
			
			// 下啦列表
			user_suad(){
				let rund = [];
				namelist({source: 'touch'}).then((row)=>{
					if(row.code == 200){
						row.data.filter((item) => {
							if(item.val){
								item.val.split(",").filter((val) => {
									rund.push({name:val,code:item.code,id:item.id})
								})
								this.$set(item,'value',rund)
							}
						})
						this.crmGrades = row.data;
					}
				})
			},
			
			// 時間处理
			Time_val(val){
				this.field_list.filter((item) => {
					if(item.code == val.code){
						this.$set(item,'value',this.cDate)
					}
				})
			},
			
			// 提交
			okclick(){
				let so_data = {};
				let datas = {};
				this.field_list.filter((item) => {
					if(item.code == 'contactDate'){
						if(!item.value){
							datas['contactDate'] = this.cDate;
						}
					}
					if(item.value){
						if(item.dataType == 2){
							so_data[item.id] = item.value;
							datas['defineFields'] = JSON.stringify(so_data);
						}else{
							datas[item.code] = item.value;
						}
					}
				})
				
				this.photograph = this.ceshiData.join(",");
			
				datas['crmId'] = Number(this.uid);
				datas['crmName'] = this.kh_name;
				datas['linkManId'] = Number(this.linkManId);
				datas['linkManName'] = (this.linkManName);
				datas['salesManId'] = (this.user_mass.id);
				datas['salesManName'] = (this.user_mass.name);
				datas['type'] = this.class_id;
				datas['photograph'] =  this.photograph;
				datas['visitSign'] =  this.visitSign;
				
				if(!datas.linkManId){
					uni.showToast({
						title: '请选择联系人',
						icon: 'error'
					});
					return false;
				}
				if(!datas.remarks){
					uni.showToast({
						title: '跟进记录未输入',
						icon: 'error'
					});
					return false;
				}
				touchsave(datas).then((result) => {
					if(result.code == 200){
						uni.showToast({
							title: "添加成功"
						})
						setTimeout(() => {
							uni.navigateTo({
							    url: '/pages/common/index/detial?id=' + this.uid + this.url + "&index=" + 2
							});
						},1500)
					}
				})
			},
		
		// 定位
		cityclick(){
			
			let _this = this;
			uni.getLocation({
			  type: "gcj02",
			  geocode: true,
			  success: function (res) {
				  _this.visitSign = 
				  res.address.city 
				  +res.address.district
				  +res.address.street
				  +res.address.streetNum
				  +res.address.poiName;
				
			  },
			});
		},
		// 从新定位
		citycli(){
			
			uni.showLoading({
				title: '重定位中……',
				duration: 2000
			})
			let _this = this;
			uni.getLocation({
			  type: "gcj02",
			  geocode: true,
			  success: function (res) {
				 _this.sity = 
				  res.address.city 
				  +res.address.district
				  +res.address.street
				  +res.address.streetNum
				  +res.address.poiName;
			  },
			});
			if(this.sity){
				setTimeout(()=>{
					this.visitSign = this.sity;
				},2000)
			}
		},
		
			outps(){
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //从相册选择
					success: function (res) {
						console.log(JSON.stringify(res.tempFilePaths));
					}
				});
			},
			
			outlot(){
				uni.navigateBack();
			},
			datetime(e){
				this.dates=e;
			},
			
			kxdatetime(e){ 
				this.cDate = e;
			},
			
			upldfile(rst){
				this.ceshiData.push(rst);
				console.log('添加数组',this.ceshiData)
			},
			
			delarra(val){
				this.ceshiData.splice(val,1);
				console.log('删除后数组',this.ceshiData)
			}
			
		},
	}
</script>

<style scoped lang="scss">
.record{
	width: 100%;
	background-color: #fff;
	.record_one {
		padding-top: 45px;
	}
	.record_class {
		display: flex;
		justify-content: space-around;
		font-size: 20px;
		div {
			padding: 5px 15px 5px 15px;
			border-radius: 4px;
			border: 1px solid #1890FF;
		}
	}
	.record_field {
		// color:red;
		background-color: #1890FF;
		color: #fff;
	}
	.record_sign {
		display: flex;
		padding-left: 30rpx;
		margin-top: 10px;
		.record_sign_text {
			padding: 5rpx 0 5rpx 10rpx;
			// display: flex;
			// justify-content: space-between;
		}
	}
	.record_time {
		height: 90rpx;
		line-height: 90rpx;
		display: flex;
		padding: 0 0 0 30rpx;
		overflow: hidden;
		// justify-content: space-between;
	}
	.record_time_text {
		padding-left: 10%;
		overflow: hidden;
	}
	
	.record_class_bottom {
		text-align: center;
		font-size: 60px;
		color: red;
	}

	.record_city {
		width: 95%;
		margin: auto;
		color: #007aff;
		border-bottom: 1px solid #cacaca;
	}
	
	.record_det {
		width: 95%;
		margin: auto;
		display: flex;
		
		// justify-content: space-between;
		height: 90rpx;
		div {
			line-height: 90rpx;
			input {
				outline-style: none ; 
				height: 60rpx;
				border-radius: 4px;
				border: 0px;
				border: 1px solid #ccc;
				// padding-left: 20rpx;
			}
			input:hover{
				border: 1px solid #1890ff;
				// box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
			}

		}
			
		.record_input {
			width: 60%;
			margin-right: 10rpx;
				// padding-top: 8px;
			// margin: auto;
			// margin-left: 0;
			// border: 1px solid red;
			overflow: hidden;
		}
		.record_span {
			// width: 30%
		}
		span {
			padding-left:10px;
			float: left;
		}
		.record_text {
			width: 100%;
			padding-left:10px;
			text {
				font-size: 22px;
				color:#2440b3
			}
		}
	
		
	}
	.textarea_op{
		width: 100%;
		.textarea_text {
			border: 1px solid #cacaca;
			width: 90%;
			margin: auto;
			border-radius: 4px;
			padding: 2px;
			font-size: 15px;
			height: 90px;
		}
		.textarea_text:hover {
			border: 1px solid #1890ff;
			// box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
		}
	}
	
	.record_city{
		width: 100%;
		height: 90rpx;
		margin-bottom: 15px;
		
		.record_city_txt {
			width: 90%;
			margin: auto;
			// display: flex;
			// justify-content: space-between;
			text {
				width: 40%;
			}
		}
		.record_city_weiz {
			width: 92%;
			margin: auto;
			height: 90rpx;
			line-height: 90rpx;
			margin-bottom: 10px;
			display: flex;
			// justify-content: space-between;
			input {
				height: 90rpx;
				line-height: 90rpx;
			}
			
		}
	}
	.record_icon {
		display: flex;
		width: 92%;
		margin: auto;
		border: 1px solid red;
		// justify-content: space-between;
		text{
			width: 79%;
			border: 1px solid #F0F0F0;
			line-height: 61px;
		}
	}
	.record_icon i {
		font-size: 60px;
	}
	
	.record_button{
		width: 100%;
		padding: 30rpx 0 30rpx 0;
	}
	.record_button div{
		display: flex;
		width: 90%;
		margin: auto;
		justify-content: space-around;
		text {
			padding: 20rpx 40rpx 20rpx 40rpx;
			background-color: #1890ff;
			border-radius: 4px;
			color: #fff;
		}
	}
	
	.recod_frous {
		width: 60%;
		padding-top: 16rpx;
	}
	
}
</style>
